<template>
    <div class="know-info-box" :style="{ transform: firstShow ? 'translateX(0)' : '' }">
        <div class="title">
            <span class="title-name">{{ $t('message.tooltips.knowInfo') }}</span>
            <svg class="close-icon" @click="closeKnowInfo">
                <use xlink:href="#keowledge-danchuangguanbi1"></use>
            </svg>
        </div>
        <div class="know-info-body" v-loading="loading">
            <el-scrollbar>
                <div class="know-scroll-body">
                    <div class="know-cover">
                        <img :src="knowInfo.color ? knowInfo.color : '/jvs-public/img/风景/a4.png'">
                    </div>
                    <div class="know-title">
                        <div class="name" v-tooltip-auto-show>
                            <el-tooltip :content="knowInfo.name" effect="light">
                                <span>{{ knowInfo.name }}</span>
                            </el-tooltip>
                        </div>
                        <div
                            :class="['type', knowInfo.shareRole === 'user' && 'user', knowInfo.shareRole === 'register' && 'register']">
                            {{ knowInfo.shareRole === 'register' ? $t('message.typeMenu.enterprise') : knowInfo.shareRole ===
                                'user' ? $t('message.typeMenu.private') : $t('message.typeMenu.wholeNetwork')}}</div>
                    </div>
                    <div class="know-desc" :title="knowInfo.description">
                        {{ knowInfo.description }}
                    </div>
                    <div class="button-item-box">
                        <div class="button-item" @click="doAction('openSet')">
                            <svg class="icon">
                                <use xlink:href="#keowledge-shezhi1"></use>
                            </svg>
                            <span>{{ $t('message.text.knowledgeSetting') }}</span>
                        </div>
                    </div>
                    <div class="button-item-box" v-if="false">
                        <div class="button-item"
                            :class="[!$permissionRole('library_down', knowInfo.dcIdentifying) && 'disabled-click']"
                            @click="doAction('download')">
                            <svg class="icon">
                                <use xlink:href="#keowledge-xiazai2"></use>
                            </svg>
                            <span>{{ $t('message.text.libraryDownload') }}</span>
                        </div>
                    </div>
                    <div class="button-item-box no-click" v-if="knowInfo.shareRole != 'user'">
                        <div class="button-item">
                            <svg class="icon">
                                <use xlink:href="#keowledge-fenxiang"></use>
                            </svg>
                            <span>{{ $t('message.text.linkAddress') }}</span>
                            <svg class="icon copy-icon" @click="doAction('copy')">
                                <use xlink:href="#keowledge-a-ziyuan2"></use>
                            </svg>
                        </div>
                        <div class="address-box">
                            {{ getAddress }}
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="number-item">
                        <div class="title">{{ $t('message.text.fileNumber') }}</div>
                        <div class="content"></div>
                    </div>
                    <div class="number-item">
                        <div class="title">{{ $t('message.index.createBy') }}</div>
                        <div class="content">{{ knowInfo.createBy }}</div>
                    </div>
                    <div class="number-item">
                        <div class="title">{{ $t('message.index.possessorName') }}</div>
                        <div class="content">{{ knowInfo.possessorName }}</div>
                    </div>
                    <div class="number-item">
                        <div class="title">{{ $t('message.table.createTime') }}</div>
                        <div class="content">{{ knowInfo.createTime }}</div>
                    </div>
                    <div class="number-item">
                        <div class="title">{{ $t('message.table.updateTime') }}</div>
                        <div class="content">{{ knowInfo.updateTime }}</div>
                    </div>
                    <div class="line"></div>
                    <div class="number-item">
                        <div class="title">
                            <svg class="icon">
                                <use xlink:href="#keowledge-liulan"></use>
                            </svg>
                            {{ $t('message.text.priviewNumber') }}
                        </div>
                        <div class="content">{{ dataInfo.viewNum }}</div>
                    </div>
                    <div class="number-item">
                        <div class="title">
                            <svg class="icon">
                                <use xlink:href="#keowledge-xiazaishu"></use>
                            </svg>
                            {{ $t('message.text.downloadNumber') }}
                        </div>
                        <div class="content">{{ dataInfo.downNum }}</div>
                    </div>
                    <div class="number-item">
                        <div class="title">
                            <svg class="icon">
                                <use xlink:href="#keowledge-dianzan-weixuanzhong"></use>
                            </svg>
                            <!-- 点赞数 -->
                            {{ $t('message.text.fileSize') }}
                        </div>
                        <div class="content">{{ dataInfo.fileSize }}</div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    computed,
    onMounted,
    nextTick,
    getCurrentInstance
} from 'vue'
import type { ComponentInternalInstance } from 'vue'
import { useRouter } from "vue-router"
import { copyText, downLoad } from '@/utils/util'
import { getKnowFileNum, getFilSize, getDownViewNum } from '@/api/common'
import { $permissionRole } from '@/utils/role'
import { downLoadFileD } from '@/api/knowledge'
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const router = useRouter();
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any;

const emit = defineEmits(["close", 'backPage', 'updateKnowInfo'])
const props = defineProps({
    knowInfo: {
        type: Object,
        default() {
            return {}
        }
    }
})
const loading = ref(false)
const firstShow = ref(false)
const dataInfo = ref({
    fileNum: 0,
    fileSize: '0KB',
    viewNum: '0',
    downNum: '0'
})
onMounted(() => {
    init()
    nextTick(() => {
        firstShow.value = true
    })
})
const getAddress = computed(() => {
    let str = window.location.href
    if (props.knowInfo.shareRole != 'user') {
        str.replace('/my/', '/all/')
    }
    return str
})
async function init() {
    loading.value = true
    let resNum = await getKnowFileNum(props.knowInfo.id)
    let resSize = await getFilSize(props.knowInfo.id)
    let resDownView = await getDownViewNum(props.knowInfo.id)
    if (resNum.data.code == 0) {
        dataInfo.value.fileNum = resNum.data.data
    }
    if (resSize.data.code == 0) {
        dataInfo.value.fileSize = resSize.data.data
    }
    if (resDownView.data.code == 0) {
        dataInfo.value.viewNum = resDownView.data.data.SEE
        dataInfo.value.downNum = resDownView.data.data.DOWNLOAD || 0
    }
    loading.value = false
}
function closeKnowInfo() {
    emit('close')
}
function doAction(type) {
    switch (type) {
        case 'copy':
            copyText(getAddress.value, () => {
                proxy.$onePrompt.$oneNotify({
                    title: $t('message.prompt'),
                    message: $t('message.message.copySuccess'),
                    type: 'success',
                    position: 'bottom-right'
                })
            })
            break;
        case 'openSet':
            proxy.$openKnowSet({
                knowInfo: props.knowInfo,
                changeVal: (val) => {
                    emit("updateKnowInfo", val)
                },
                transtionBack: () => {
                    emit('backPage')
                }
            })
            break
        case 'download':
            if (!$permissionRole('library_down', props.knowInfo.dcIdentifying)) return
            // todo
            downLoadFileD({ id: props.knowInfo.id, timestamp: new Date().getTime() }, 'blob', (e) => {
                // downLoadFileInfo.percentage = parseInt(e.progress * 100)>=99?99:parseInt(e.progress * 100)
                // this.sendDownData(downLoadFileInfo)
            }).then(res => {
                downLoad(res, true, () => {

                }, () => {

                })
            }).finally(res => {
            })
            break
        default:
            break;
    }
}
</script>
<style lang="scss" scoped>
.know-info-box {
    width: 268px;
    height: 100%;
    transition: transform .2s;
    padding-left: 24px;
    box-sizing: border-box;
    border-left: 1px solid #EEEFF0;
    background-color: #FFFFFF;
    transform: translateX(100%);

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 24px;

        .title-name {
            font-size: 14px;
            color: #363b4c;
            @include SourceHanSansCN-Bold;
        }

        .close-icon {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
    }

    .know-info-body {
        height: calc(100% - 20px);
        box-sizing: border-box;

        .know-scroll-body {
            padding-right: 24px;

            .know-cover {
                padding: 8px 0px;
                box-sizing: border-box;
                width: 220px;
                height: 144px;
                border-radius: 5px 5px 5px 5px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                    object-fit: cover;
                }
            }

            .button-item-box {
                background: #F5F6F7;
                border-radius: 4px 4px 4px 4px;
                padding: 8px 12px;
                box-sizing: border-box;
                cursor: pointer;

                .button-item {

                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .icon {
                        width: 16px;
                        height: 16px;
                    }

                    .copy-icon {
                        cursor: pointer;
                    }

                    span {
                        margin-left: 16px;
                        flex: 2;
                        font-size: 14px;
                    }
                }

                .address-box {
                    margin-top: 4px;
                    background: #FFFFFF;
                    border-radius: 4px 4px 4px 4px;
                    padding: 8px;
                    box-sizing: border-box;
                    color: #363b4c;
                    font-size: 12px;
                    word-break: break-all;
                }
            }

            .no-click {
                cursor: default;
            }

            .line {
                height: 1px;
                background: #EEEFF0;
                margin: 16px 0px;
            }

            .know-title {
                display: flex;
                align-items: center;

                .name {
                    span {
                        color: #494F6A;
                        font-size: 14px;
                        @include SourceHanSansCN-Bold;
                    }

                    max-width: calc(100% - 40px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .type {
                    font-size: 12px;
                    color: #1e6fff;
                    background-color: #E8F0FF;
                    border-radius: 5px 0px 5px 0px;
                    width: 40px;
                    text-align: center;
                    height: 18px;
                    line-height: 18px;
                    margin-left: 8px;
                }

                .user {
                    background: #FFE7ED;
                    color: #FF194C;
                }

                .register {
                    background: #E9F7EC;
                    color: #36B452;
                }
            }

            .know-desc {
                color: #6F7588;
                font-size: 12px;
                display: -webkit-box;
                margin-bottom: 16px;
                word-break: break-all;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }

            .button-item-box+.button-item-box {
                margin-top: 12px;
            }

            .number-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 12px 0px;

                .title {
                    color: #6F7588;
                    font-size: 14px;
                    display: flex;
                    align-items: center;

                    .icon {
                        width: 14px;
                        height: 14px;
                        margin-right: 8px;
                    }
                }

                .content {
                    color: #363B4C;
                    font-size: 14px;
                }
            }
        }
    }

}
</style>